<template>
  <div class="playerContent">
    <div class="title">
      <div class="line"></div>
      <div class="name">比赛管理</div>
      <div class="add" @click="handleAdd">新增比赛</div>
      <div class="btn">导出</div>
    </div>
    <div class="search">
      <div class="inputItem">
        <span>比赛名称</span>
        <common-input v-model="raceForm.name" placeholder="请输入比赛名称"></common-input>
      </div>
      <div class="inputItem">
        <span>比赛时间</span>
        <el-date-picker
          v-model="raceForm.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="inputItem"></div>
      <div class="btns">
        <div class="btn searchBtn" @click="handleSearch">查询</div>
        <div class="btn resetBtn" @click="handleReset">重置</div>
        <div class="btn resetBtn" @click="handleDel">删除</div>
      </div>
    </div>
    <div class="content">
      <CommonTablePage
        style="flex: 1"
        :columns="raceColumns"
        :pagination="pageInfo"
        :tableData="tableData"
      >
        <template #userList="{ row }">
          <span v-for="(item, index) in row.userList" :key="index">{{ item }}</span>
        </template>
        <template #edit="{ row }">
          <span class="edit" @click="handleEdit(row)">编辑</span>
          <span class="edit" @click="handleJoin(row)">比赛结果填写</span>
        </template>
      </CommonTablePage>
    </div>
    <changeDialog
      v-if="changeDialog"
      :changeDialog.sync="changeDialog"
      :curRow="curRow"
    ></changeDialog>
  </div>
</template>
<script>
import { raceColumns } from "./column.js";
import { viewMinix } from "@/minix/viewMinix.js";
import changeDialog from "@/views/raceManage/components/changeDialog";
export default {
  components: {
    changeDialog,
  },
  mixins: [viewMinix],
  data() {
    return {
      curRow: {},
      changeDialog: false,
      raceColumns,
      tableData: [
        {
          id: 1,
          name: "张三",
          time: "2019-10-09 19:00 - 2019-10-09 20:00",
          userList: ["1", "2", "3"],
          referee: ["李武"],
          raceArea: "篮球场",
          state: "0",
        },
      ],
      raceForm: {
        name: "",
        timeRange: "",
      },

      rows: [],
    };
  },
  methods: {
    async getTableData() {},
    handleReset() {
      this.name = "";
      this.time = ["", ""];
    },
    selRows(rows) {
      this.rows = rows;
    },
    handleDel() {
      if (this.rows.length < 1) {
        return this.$message({
          type: "error",
          message: "请勾选球员信息!",
        });
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    handleAdd() {
      this.curRow = { id: "" };
      this.changeDialog = true;
    },
    handleEdit(row) {
      this.curRow = row;
      this.changeDialog = true;
    },
    handleJoin(row) {
      this.curRow = row;
    },
  },
};
</script>

<style lang="less" scoped>
.playerContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;

    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      width: 68px;
      height: 32px;
      display: flex;
      font-size: 14px;
      background-color: #fc6c09;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .add {
      margin-left: auto;

      margin-right: 16px;
      width: 68px;
      height: 32px;
      display: flex;
      font-size: 14px;
      background-color: #fc6c09;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }

  .search {
    height: 80px;
    margin-top: 15px;
    padding: 10px;
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .inputItem {
      display: flex;
      margin-right: 10px;

      span {
        width: 70px;
        display: flex;
        align-items: center;
      }
    }

    .btns {
      display: flex;

      .btn {
        width: 68px;
        height: 32px;
        display: flex;
        font-size: 14px;
        background-color: #fc6c09;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .searchBtn {
        margin-right: 16px;
      }

      .resetBtn {
        margin-right: 16px;
      }
    }
  }

  .content {
    flex: 1;
    margin-top: 20px;
    display: flex;
    background-color: #fff;
    padding: 15px 10px 10px 30px;

    .edit {
      color: #fc6c09;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
</style>
